<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <style>
        .course-row { line-height: 50px ; margin: 5px auto ; }
    </style>
</head>
<body>

    <div class="container" id="app">
        <div class="row border course-row" v-for="c in courses">
            <span class="col-2">{{c.id}}</span>
            <span class="col-8">{{c.name}}</span>
            <span class="col-2">
                <a class="btn btn-primary" @click="handler">删除</a>
            </span>
        </div>
    </div>

    <script src="/javascripts/vue@3.0.11.js" ></script>
    <script>
        const app = Vue.createApp( {
            data(){
                return {
                    courses: [
                        { id: 1001 , name: 'Vue.js' } ,
                        { id: 2002 , name: 'JavaScript' } ,
                        { id: 3003 , name: 'HTML' } ,
                        { id: 4004 , name: 'CSS' }
                    ]
                }
            },
            methods: {
                handler(event){
                    event.preventDefault();
                    event.stopPropagation();
                    let t = event.target ;
                    // 找它爸爸的哥哥的哥哥
                    let id = t.parentElement.previousElementSibling.previousElementSibling.innerHTML;
                    console.log( id );
                    let index = this.courses.findIndex( c => c.id == id );
                    if( index != -1 ) {
                        this.courses.splice(index, 1);
                    }
                }
            }
        } );

        app.mount( '#app' );
    </script>
</body>
</html>